@import "~scss/variables";
@import "~scss/mixins";

$sw-media-index-font-size-navigation: $font-size-m;
$sw-media-index-color-breadcrumb-icon: $color-shopware-brand-500;
$sw-media-index-color-navigation-parent: $color-darkgray-300;
$sw-media-index-page-background-color: $color-white;

.sw-media-index {
    .sw-media-index__navigation {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-column-gap: 16px;
        align-items: center;
        padding-left: 26px;
        min-width: 150px;
        font-size: $sw-media-index-font-size-navigation;
    }

    .sw-media-index__navigation-breadcrumb {
        color: $sw-media-index-color-breadcrumb-icon;
        height: 28px;
    }

    .sw-media-index__navigation-label {
        @include truncate;

        color: $sw-media-index-color-navigation-parent;
        text-decoration: none;
    }

    .sw-media-index__page-content {
        background: $sw-media-index-page-background-color;
        display: grid;
        height: 100%;
        grid-template-columns: 1fr auto;
    }

    .sw-media-index__media-library {
        padding-top: 24px;
    }
}
